import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { getAppList } from '/@/api/system/system';

/**
 * @description: menu type
 */
export enum MenuTypeEnum {
  DIR = 1,
  MENU = 2,
  BUTTON = 3,
}

interface MenuTypeInfo {
  value: number;
  label: string;
  style?: string;
}

export const menuTypeMap: Map<MenuTypeEnum, MenuTypeInfo> = (() => {
  const map = new Map<MenuTypeEnum, MenuTypeInfo>();
  map.set(MenuTypeEnum.DIR, { value: MenuTypeEnum.DIR, label: '目录', style: 'green' });
  map.set(MenuTypeEnum.MENU, { value: MenuTypeEnum.MENU, label: '菜单', style: 'blue' });
  map.set(MenuTypeEnum.BUTTON, { value: MenuTypeEnum.BUTTON, label: '按钮', style: 'purple' });
  return map;
})();

const isDir = (type: number) => type === MenuTypeEnum.DIR;
export const isMenu = (type: number) => type === MenuTypeEnum.MENU;
export const isButton = (type: number) => type === MenuTypeEnum.BUTTON;

export const columns: BasicColumn[] = [
  {
    title: '菜单名称',
    dataIndex: 'name',
    width: 200,
    align: 'left',
    slots: { customRender: 'name' },
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = ~~status === 1;
      const color = enable ? 'green' : 'red';
      const text = enable ? '正常' : '停用';
      return h(Tag, { color: color }, () => text);
    },
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '菜单名称',
    component: 'Input',
    colProps: { span: 16 },
    componentProps: {
      placeholder: '请输入菜单名称',
    },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'id',
    label: 'ID',
    component: 'Input',
    show: false,
  },
  {
    field: 'appCode',
    label: '所属应用',
    component: 'ApiSelect',
    componentProps: {
      api: getAppList,
      resultField: 'list',
      labelField: 'name',
      valueField: 'code',
      immediate: true,
    },
    defaultValue: '',
    required: true,
  },
  {
    field: 'type',
    label: '菜单类型',
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: ({ formActionType }) => {
      return {
        options: [
          { label: '目录', value: 1 },
          { label: '菜单', value: 2 },
        ],
        onChange: (e) => {
          const { updateSchema } = formActionType;
          const label = isButton(e) ? '按钮名称' : '菜单名称';
          updateSchema([
            {
              field: 'name',
              label: label,
            },
            {
              field: 'routePath',
              required: !isButton(e),
            },
          ]);
        },
      };
    },
    required: true,
  },
  {
    field: 'parentId',
    label: '上级菜单',
    component: 'TreeSelect',
    componentProps: {
      fieldNames: {
        title: 'label',
        key: 'id',
        value: 'id',
      },
      getPopupContainer: () => document.body,
    },
    required: true,
    ifShow: ({ values }) => !isButton(values.type),
  },
  {
    field: 'name',
    label: '菜单名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'routePath',
    label: '路由地址',
    component: 'Input',
    helpMessage: ['浏览器显示的URL', '例：/menu，对应打开页面为菜单页面'],
    componentProps: {
      placeholder: '请输入路由地址',
    },
    required: true,
  },
  {
    field: 'component',
    label: '组件路径',
    helpMessage: ['前端vue组件 views文件夹下路径', '例：system/menu/index', '父级目录填 Layout'],
    componentProps: {
      placeholder: '请输入组件路径',
    },
    component: 'Input',
  },
  {
    field: 'redirect',
    label: '跳转路径',
    helpMessage: ['菜单重定向路径'],
    componentProps: {
      placeholder: '请输入组件路径',
    },
    component: 'Input',
  },
  {
    field: 'icon',
    label: '图标',
    component: 'IconPicker',
    required: true,
    ifShow: ({ values }) => !isButton(values.type),
  },
  {
    field: 'sort',
    label: '排序',
    component: 'InputNumber',
    defaultValue: 100,
    required: true,
  },
  {
    field: 'visible',
    label: '是否显示',
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    },
    ifShow: ({ values }) => !isButton(values.type),
  },
  {
    field: 'status',
    label: '菜单状态',
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '正常', value: 1 },
        { label: '停用', value: 0 },
      ],
    },
    ifShow: ({ values }) => !isButton(values.type),
  },
];

export const permsFormSchema: FormSchema[] = [
  {
    field: 'id',
    label: 'ID',
    component: 'Input',
    show: false,
  },
  {
    field: 'type',
    label: '按钮类型',
    component: 'Input',
    defaultValue: MenuTypeEnum.BUTTON,
    show: false,
  },
  {
    field: 'parentId',
    label: '上级菜单',
    component: 'TreeSelect',
    componentProps: {
      fieldNames: {
        title: 'label',
        key: 'value',
        value: 'value',
      },
      getPopupContainer: () => document.body,
    },
    required: true,
    ifShow: ({ values }) => !isDir(values.type),
  },
  {
    field: 'name',
    label: '按钮名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'perms',
    label: '权限标识',
    component: 'Input',
    helpMessage: ['权限标识', '例：system:user:create'],
    componentProps: {
      placeholder: '权限标识',
    },
  },
  {
    field: 'routePath',
    label: '请求接口',
    component: 'Input',
    helpMessage: ['请求接口', '例：/system/menu/create'],
    componentProps: {
      placeholder: '请输入请求接口',
    },
  },
  {
    field: 'sort',
    label: '排序',
    component: 'InputNumber',
    defaultValue: 100,
    required: true,
  },
  {
    field: 'status',
    label: '菜单状态',
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '正常', value: 1 },
        { label: '停用', value: 0 },
      ],
    },
    ifShow: ({ values }) => !isButton(values.type),
  },
];

export const subColumns: BasicColumn[] = [
  {
    title: '权限名称',
    dataIndex: 'name',
    width: 100,
  },
  {
    title: '权限标识',
    dataIndex: 'perms',
    width: 150,
  },
  {
    title: '请求接口',
    dataIndex: 'routePath',
  },
];

export const subSearchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '权限名称',
    component: 'Input',
    colProps: { span: 8 },
  },
];

export const permsTypeOptions = [
  { value: 'list', label: '列表(list)' },
  { value: 'view', label: '查看(view)' },
  { value: 'add', label: '添加(add)' },
  { value: 'edit', label: '编辑(edit)' },
  { value: 'delete', label: '删除(delete)' },
  { value: 'export', label: '导出(export)' },
  { value: 'import', label: '导入(import)' },
];

export const servicesOptions = [
  { value: 'lemon-system', label: '系统服务' },
  { value: 'lemon-pms', label: '商品服务' },
];
